17. Project Solution - Long

Files Mentioned in this Video:

• Project Solution

  • This solution is also available in the workspace from Project Part 1 (via the Solution folder)

• pattern-mostly-fluid-quiz-blankcss.html

  • This can help you to use flexbox to make your page responsive and learn how to use the viewport property
  • Use the Developers tools to find the Elements and the css properties.

Note that these files are also available in the Supporting Materials at the very bottom of this page.

💡 CSS inherit keyword 💡

As mentioned in the video above, the solution in main.css uses the following code:

.top-news__item a {
  text-decoration: none;
  color: #666;
  padding: 1.5em inherit;
}

Let's check out what's happening in the fourth line of code.

Here, we give some space to that element between its content and border via the padding property. The first value sets the top and bottom padding to 1.5em; that is, 1.5 times the font size of the current element. As such, we are dealing with a relative unit, rather than an absolute unit (e.g., pixels, centimeters, etc.).

While the first value given to padding takes care of the top and bottom padding, the second value sets the left and right padding. By using the CSS keyword inherit, we are saying we want the padding property to inherit its value from its container (i.e., its parent element).

Feel free to check out inherit on MDN for more examples!